盒模型与 BFC

标准盒模型 vs IE 盒模型

box-sizing	宽度包含
content-box（默认）	仅内容区，width 不含 padding/border
border-box	内容 + padding + border，布局更直观

全局切换常见写法：

*,
*::before,
*::after {
  box-sizing: border-box;
}

---

BFC（块级格式化上下文）

触发了 BFC 的容器内部布局与外界隔离，常用于：

• 清除浮动（浮动子元素参与高度计算）
• 阻止 margin 重叠（与相邻块的外边距折叠）
• 防止内部浮动溢出父级

常见触发条件（任选其一）：

• overflow 不为 visible
• display: flow-root（语义清晰，推荐）
• float 非 none
• position 为 absolute / fixed
• flex / grid 子项等（Flex/Grid 格式化上下文另有规则）

---

margin 塌陷（简要）

相邻块级元素的 垂直 margin 可能合并为较大一侧；同一 BFC 内父子也可能发生 margin 传递。处理方式：父级建立 BFC、padding 替代、gap 布局等。

除此之外，使用 flex/grid 容器布局，处理 margin 塌陷问题，更优雅，影响更小

---

小结

日常布局先统一 border-box；遇到 浮动高度塌陷、垂直 margin 怪异 时优先考虑 BFC / Flex / Grid 当代替方案。